<template>
   <div class="box">
      <el-table :data="tableData.data" style="width: 100%" height="440">
         <el-table-column :prop="item" :label="tableData.titles[index]"  v-for="(item,index) in tableData.words" :key="index">
            <template slot-scope="scope" >
               <el-image v-if="index==0" style="width: 50px; height: 50px;border-radius: 50%;" :src="scope.row.url" fit=""></el-image>
               <span v-else>{{tableData.data[scope.$index][item]}}</span>
            </template>
         </el-table-column>
         <el-table-column prop="" label="更多" v-if="tableData.isShowBtn">
            <template slot-scope="scope">
               <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
               <el-button size="mini" type="danger" @click="deleFn(scope.$index, scope.row)">删除</el-button>
            </template>
         </el-table-column>
      </el-table>

      <el-pagination background layout="prev, pager, next" :total="data.data.length"  @current-change="change" :current-page="pageIndex" :page-size="pageSize" style="text-align: center;margin: 20px 0;">
      </el-pagination>
       

   </div>
</template>

<script>
import { deleAdmin, deleMendian, upAdmin, upMendian } from "@/api/index";

export default {
   name: 'userList',
   //需要传入 表格数据，删除的方法，修改的方法
   props: ['data','deleFn','handleEdit'],
   data() {
      return {
         //分页当前页数
         pageIndex:1,
         //每页个数
         pageSize:6,
         //总个数
         total:this.data.data.length
      }
   },
   methods: {
      change:function(index){
         this.pageIndex=index
      }
   },
   mounted() {

   },
   computed:{
      tableData:function(){
         let obj={...this.data}
         obj.data=this.data.data.slice(((this.pageIndex-1)*this.pageSize),(this.pageIndex)*this.pageSize)
         return obj
      },
   },
   watch:{
      data:function(){
         this.pageIndex=1
      }
   }
}
</script>

<style scoped>
.box {
   width: 100% !important;
   padding: 0 !important;
}

</style>